<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { getDetail, saveMsg } from "@/api/needs";
import { useAccountStore } from "@/stores/account";
import { checkLogin } from "@/utils";

const accountStore = useAccountStore();

const tabs = ["需求内容", "留言板"];
const activeIndex = ref(0);
const info = reactive<Record<string, any>>({
  id: 0
});
const msgList = ref([]);

const content = ref('');
async function handlePostMsg(){
  if(!checkLogin()) return;
  if(content.value == '') {
    uni.showToast({title: '请输入留言内容', icon: 'none'});
    return
  }
  await saveMsg({
    id: info.id,
    uid: accountStore.userInfo.id,
    content: content.value,
  });
  uni.showToast({title: '留言成功'});
}

onLoad(async (options)=>{
  if(options?.id){
    const data = await getDetail({id: options.id});
    Object.assign(info, data);
    msgList.value = data.msgList || [];
  }
});

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="relative overflow-hidden">
    <page-navbar title="需求详情" :isScrolled="isScrolled"></page-navbar>

    <view class="mx-4 mt-5 text-(lg #333333)">{{info.title}}</view>
<!--  
    <view class="mx-4 mt-5 space-x-5 flex text-sm">
      <view 
        class="relative pb-1 before:(content-[''] absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-1 bg-gradient-to-r from-#5199F9 to-#0164E6 rounded-r)"
        :class="{'before:(hidden)': activeIndex != index}"
        v-for="(item, index) in tabs" :key="index"
        @click="activeIndex = index"
      >
      {{ item }}
      </view>
    </view>
-->
    <view class="mx-4 mt-5 grid gap-3" v-show="activeIndex == 0">
      <view class="bg-white rounded-lg p-3 grid gap-1">
        <view class="text-(sm #333333) font-500">描述</view>
        <view class="text-(sm #333333)">{{info.desc}}</view>
      </view>

      <view class="bg-white rounded-lg p-3 grid gap-1">
        <view class="text-(sm #333333) font-500">内容</view>
        <view class="text-(sm #333333)">{{info.content}}</view>
      </view>

      <view class="bg-white rounded-lg p-3 grid gap-1">
        <view class="text-(sm #333333) font-500">发布人</view>
        <view class="text-(sm #333333)">{{info.username}}</view>
      </view>

      <view class="w-86 fixed bottom-5 mb-[--safe-area-inset-bottom] left-50% -translate-x-50% z-10 text-(xs #999999 center) [&>a]:(text-#999999 no-underline)" v-html="info.tel"></view>
    </view>

    <view class="mx-4 mt-5 grid gap-3" v-show="activeIndex == 1">
      <view class="bg-white rounded-lg p-3 grid gap-2" v-for="value in info.msgList">
        <view class="flex items-center">
          <view class="text-(sm #333333) font-500">用户名</view>
        </view>
        <view class="text-(sm #333333)">留言内容</view>
        <view class="flex items-center justify-between mt-1">
          <view class="text-(xs #999999)">2025/8/1  10:38</view>
          <view class="text-(xs #999999)">99</view>
        </view>
      </view>

      <view v-if="msgList.length == 0" class="h-[50vh] flex flex-col items-center justify-center">
        <view class="text-center text-gray">
          <view class="i-quill-signature mx-auto h-25 w-25" />
          <view class="text-sm"> 数据为空 </view>
        </view>
      </view>

      <view class="fixed w-94 left-50% -translate-x-50% bottom-0 pb-[--safe-area-inset-bottom] bg-white">
        <view class="flex items-center justify-between px-4 py-2 space-x-3">
          <view class="flex-1 border-(~ solid black/8) px-3 py-2 rounded-lg">
            <input class="text-sm" type="text" placeholder="写留言" v-model="content">
          </view>
          <uv-button
            type="primary"
            text="发表"
            :custom-style="{
              fontSize: '14px',
              backgroundImage: 'linear-gradient(to right, #5199F9, #0164E6)',
              height: '40px',
              borderRadius: '8px',
              borderColor: 'transparent'
            }"
            @click="handlePostMsg"
          ></uv-button>
        </view>
      </view>
    </view>
  </view>
</template>
